<!--个人信息页面-->
<template>
  <view style="height:calc(100vh - 10rpx);background-color: #FFFFFF">
    <view style="padding: 20rpx 40rpx 0;margin-top: 20rpx;">
      <view>
        <view class="topavatar">
          <image :src="avatar" style="width: 100%;height: 100%"></image>
          <!-- #ifdef H5 ||APP-PLUS -->
          <view @click="H5ImageClick" style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 40rpx;height: 32rpx">
            <image src="/static/water/camera.png" style="width: 100%;height: 100%;position:absolute;left: 0"></image>
          </view>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <button class="avatarstyle" type="balanced" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
            <view style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 40rpx;height: 32rpx">
              <image src="/static/water/camera.png" style="width: 100%;height: 100%;position:absolute;left: 0"></image>
            </view>
          </button>
          <!-- #endif -->
		  <!-- #ifdef MP-TOUTIAO -->
		  <button class="avatarstyle" type="balanced" @click="getUser">
		    <view style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 40rpx;height: 32rpx">
		      <image src="/static/water/camera.png" style="width: 100%;height: 100%;position:absolute;left: 0"></image>
		    </view>
		  </button>
		  <!-- #endif -->
		  
        </view>
      </view>
      <view class="row h50 u-border-bottom">
        <text>昵称</text>
        <input type="nickname" maxlength="10" v-model="nickName" @blur="blurname" placeholder="请输入昵称" style="text-align: right"></input>
      </view>
      <view class="row h50 u-border-bottom">
        <text>手机号</text>
        <uni-easyinput v-model="phoneNumber" disabled type="text" :inputBorder="false" inputAlign="right"></uni-easyinput>
      </view>
      <!--<view class="row h50 u-border-bottom">-->
      <!--  <text>密码</text>-->
      <!--  <uni-easyinput placeholder="不填则不修改" disabled maxlength="6" v-model="password"  type="password" :inputBorder="false" inputAlign="right"></uni-easyinput>-->
      <!--</view>-->
    </view>
  <view style="position: fixed;bottom: 20rpx;left: 0;right: 0;">
    <button class="personBtnStyle" type="warning" @click="confirmFun">确认</button>
    <button class="personBtnStyle1" type="warning" @click="goOut">退出登录</button>
  </view>
    <authorize @onLoadFun="onLoadFun" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
  </view>
</template>

<script>
import {getUserInfo, getUserItem, loginOutApi, updateUserInfoApi} from "@/api/user";
import { mapGetters } from 'vuex'
import Authorize from "@/components/Authorize.vue";
import store from "@/store";
import share from "@/utils/share";
import residenceTime from "@/mixins/residenceTime";

export default {
  mixins: [residenceTime],
  components: {Authorize},
  data() {
    return {
      isShowAuth: false,
      password: '',
      phoneNumber: '',
      nickName: '微信用户',
      avatar: '/static/water/defaultuser.png',
      defaultIcon: '/static/water/defaultuser.png'
    }
  },
  computed: { ...mapGetters(['isLogin']) },
  async onLoad() {
    // #ifdef H5
    share.getShareConfig({}, this.$WXMENU);
    // #endif
    uni.showLoading({ title: '个人信息获取中...' })
    this.phoneNumber = uni.getStorageSync('USER_INFO') ? JSON.parse(uni.getStorageSync('USER_INFO')).phone.substring(0,11) : ''
    getUserInfo({ id: uni.getStorageSync('UID') }).then(async rsp => {
      // let rsp = await getUserItem({ memberId: res.data.id })
      if (rsp.code === 200) {
        uni.hideLoading()
        this.nickName = rsp.data.nickname
        let icon = ''
        if (rsp.data.icon) {
          icon = rsp.data.icon
        } else {
          icon = this.defaultIcon
        }
        this.$set(this, 'avatar', icon)


      }
    }).finally(() => {
      uni.hideLoading()
    })
  },
  methods: {
      pageViewTrack(stayTime) {
      const route = this.$util.getCurrentRoute()
      		let params = {
			      Um_Key_SourcePage: route.path,
			      Um_Key_Duration: stayTime,
		      }
         this.$umaTrack.pageViewTrack(params)
    },
    goOut() {
      if (!this.isLogin) return
      uni.showModal({
        title: '',
        content: '您确定要退出登录吗？',
        showCancel: true,
        confirmText: '确认',
        cancelText: '取消',
        success: async (res) => {
          if (res.confirm) {
            this.usersInfoObj = ''
            await loginOutApi()
            store.commit('LOGOUT')
            this.avatar = this.defaultIcon
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            })
            setTimeout(()=> {
              uni.reLaunch({
                url: `/pagesWater/users/login?flagType=0`
              })
            },500)
          } else if (res.cancel) {
            uni.showToast({
              title: '已取消',
              icon: 'none'
            })
          }
        }
      })
      let params = {
        Um_Key_ButtonName: '退出登录',
        Um_Key_SourcePage: '个人中心',
      }
      this.$umaTrack.pageClickTrack(params)
    },
    H5ImageClick() {
      this.$util.uploadImageOne({ type: 3, name: 'multipart' }, res=> {
        let data = JSON.parse(res.data)
        this.avatar = data.data.url
      })
    },
	getUser() {
		this.$util.uploadImageOne({ type: 3, name: 'multipart' }, res=> {
			uni.hideLoading();
			let data = JSON.parse(res.data)
			this.avatar = data.data.url
		})
	},
    async confirmFun() {
      let form = {
        nickname: this.nickName,
        // phoneNumber: this.phoneNumber,
        iconType: 1, //0 微信头像 1自定义上传
        icon: this.avatar,
        password: this.password,
      }


      if(form.password == '') {
        delete form.password
      }else {
        if(form.password.length != 6) {
          return this.$util.Tips('请输入6位密码')
        }
      }
      // return
      let res = await updateUserInfoApi(form)
      if (res.code === 200) {
        global.pageUser = true
        setTimeout(() => {
          this.$util.Tips('修改成功')
        })
        setTimeout(()=> {
          uni.navigateBack({
            delta: 1
          });
        }, 500)
      } else {
        setTimeout(() => {
          this.$util.Tips(res.message)
        })
      }

      let params = {
        Um_Key_ButtonName: '确认',
        Um_Key_SourcePage: '个人中心',
      }
      this.$umaTrack.pageClickTrack(params)
    },

    blurname(e) {
      this.nickName = e.detail.value
    },
    async chooseAvatar(e) {
      let opt = {
        path: e.detail.avatarUrl,
        type: 1,
        name: 'multipart'
      }
      this.$util.uploadImageAPi(opt, res=> {
        let data = JSON.parse(res.data)
        this.avatar = data.data.url
      })
    },
    onLoadFun(e) {
      // this.userPhone = e.phoneNumber
      this.isShowAuth = false
    },
    authColse() {
      this.isShowAuth = false
    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}
.topavatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin: 0 auto;
  position:relative;
  text-align: center;
  line-height: 120rpx;
  overflow: hidden;
  button{
    padding: 0;
  }
}
.avatarstyle {
  position: absolute;
  top: 0;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  height: 120rpx;
  width: 120rpx;
  z-index: 99;
}
.h50 {
  height: 100rpx;
}
/deep/ .uni-easyinput {
  text-align: right !important;
}
/deep/ .is-disabled {
  background-color: #ffffff !important;
}
.personBtnStyle {
  width: 90% !important;
  margin: 10rpx auto;
  overflow: hidden;
  border-radius: 60rpx !important;
  background: #488AFD;
  color: #ffffff;
  :after{
    border: none;
  }
}
.personBtnStyle1 {
  width: 90% !important;
  overflow: hidden;
  margin: 10rpx auto;
  background-color: #fff;
  border-radius: 60rpx !important;
  border: 1rpx solid #488AFD;
  color: #488AFD;
  margin-top: 30rpx;
}
</style>